// utils/theme.js
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

// 小程序支持的样式属性
const themeProperties = [
  '--primary-color',
  '--bg-color',
  '--text-color',
  '--border-color'
]

const themes = {
  light: {
    '--primary-color': '#007aff',
    '--bg-color': '#ffffff',
    '--text-color': '#333333',
    '--border-color': '#eeeeee'
  },
  dark: {
    '--primary-color': '#0a84ff',
    '--bg-color': '#1c1c1e',
    '--text-color': '#f5f5f7',
    '--border-color': '#2c2c2e'
  }
}

const currentTheme = ref('light')

// 应用主题到当前页面
function applyTheme(themeName) {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const pageInstance = currentPage.$vm
  
  // 小程序中修改页面根节点的style
  themeProperties.forEach(prop => {
    pageInstance.$el.style.setProperty(prop, themes[themeName][prop])
  })
  
  currentTheme.value = themeName
  uni.setStorageSync('selectedTheme', themeName)
}

// 初始化主题
function initTheme() {
  const savedTheme = uni.getStorageSync('selectedTheme')
  if (savedTheme) {
    applyTheme(savedTheme)
  }
}

// 组合式函数
export function useTheme() {
  onShow(() => {
    initTheme()
  })

  return {
    currentTheme,
    applyTheme
  }
}